<template>
    <div class="login">
      <div class="loginMain">
        <h2 style="text-align: center">登录平台</h2>

        <el-form :model="loginForm" label-width="80px" class="loginFrom">
          <el-form-item label="账号">
            <el-input v-model="loginForm.name"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="loginForm.passwd"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="login" size="medium ">登录</el-button>
            <router-link to="/main" style="float: right;text-decoration: none;border: 1px solid darkgray;padding: 0px 20px">后台</router-link>
          </el-form-item>
        </el-form>

      </div>
    </div>
</template>

<script>
    export default {
        name: "Index",
      data(){
          return{
            loginForm:{}
          }
      },
      methods:{
        login(){
          var name = this.loginForm.name;
          var passwd = this.loginForm.passwd;
          if(name==null || passwd==null || name=='' || passwd==''){
            this.$message.error("账号密码不能为空")
            return
          }
          window.localStorage.setItem("user",JSON.stringify(this.loginForm))
          this.$router.push("/index")
        }
      }
    }
</script>

<style scoped>
  a:hover{
    background-color: darkgray;
  }
  .login{
    height: 900px;
    background-color:  #00CCFF;
  }
  .loginMain{
    width: 20%;
    height: 200px;
    position: absolute;
    top: 35%;
    left: 38%;
  }
  .loginFrom{
    padding-top: 20px;
    color: greenyellow;
  }
</style>
